<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://java.sun.com/jsf/html"
      >
    <h:head>
        <title>Pass Generator</title>
        <style>
            .ui-widget, .ui-widget .ui-widget {
                font-size: 90%;
            }
        </style>

        <script type="text/javascript">  
            function start() {  
                statusDialog.show();  
            }  
  
            function stop() {  
                statusDialog.hide();  
            }  
        </script>  
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
        <script type="text/javascript" src="js/jquery.qrcode.js"></script>
        <script type="text/javascript" src="js/qrcode.js"></script>
        <script>
            function generateQr() {
                alert(urlPass);
                jQuery('#qrCode').qrcode(urlPass);
            }
        </script>
    </h:head>
    <h:body>       
        <p:dialog modal="true" widgetVar="statusDialog" header="Status" draggable="false" closable="false" resizable="false">
            <p>Generating</p>
            <p:graphicImage value="/design/ajaxloadingbar.gif" />
        </p:dialog>  
        <div style="text-align: center; width: 100%">
            <div>
                <h1>
                    Pass Generator - For testing only !
                </h1>
            </div>
            <div style="text-align: center; width: 100%">
                <h:form id="frmMain">
                    <table>
                        <tr>
                            <td>
                                <table>
                                    <tr>
                                        <td>Logo Text: </td>
                                        <td>
                                            <p:inputText id="txtLogoText" value="#{beanGenerate.logoText}"></p:inputText>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Header:</td>
                                        <td>
                                            <p:inputTextarea id="txtHeaderField" value="#{beanGenerate.headerField}"></p:inputTextarea>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Primary Fields</td>
                                        <td><p:inputTextarea id="txtPrimaryField" value="#{beanGenerate.primaryFields}"></p:inputTextarea></td>
                                    </tr>
                                    <tr>
                                        <td>Secondary Fields</td>
                                        <td><p:inputTextarea id="txtSecondaryField" value="#{beanGenerate.secondaryFields}"></p:inputTextarea></td>
                                    </tr>
                                    <tr>
                                        <td>Auxilary Fields</td>
                                        <td><p:inputTextarea id="txtAuxilaryFields" value="#{beanGenerate.auxiliaryFields}"></p:inputTextarea></td>
                                    </tr>
                                </table>
                            </td>
                            <td>
                                <img src="images/guide.png"/>                            
                            </td>
                        </tr>
                    </table>
                    <p:commandButton actionListener="#{beanGenerate.doGenerate}"                                     
                                     value="Generate Pass"
                                     onclick="statusDialog.show();"
                                     update=":frmLink"
                                     icon="ui-icon-arrowthichk-s"                                     
                                     onsuccess="statusDialog.hide();"
                                     oncomplete="generateQr();"
                                     >
                    </p:commandButton>
                </h:form>                
                <h:form id="frmLink">       
                    <script>
                        urlPass='#{beanGenerate.fullPathPass}';
                    </script>
                    <h:panelGroup id="lnkDownload" rendered="#{beanGenerate.isGenerated}">
                        <a href="temp/#{beanGenerate.fileName}">Download here !</a>
                        <br/>
                        <div id="qrCode"></div>
                    </h:panelGroup>
                </h:form>
            </div>
        </div>  
    </h:body>
</html>

